*{
    margin:0;
    padding:0;
}
body{
    background:#010816;
    // background: #000 url(https://sc2.nosdn.127.net/1/style/v4/common/main_bg_v4.jpg) no-repeat fixed center top;
    .activityBackground{
        position: fixed;
        left:0;
        bottom:0;
        // height:100%;
        // max-width: 100%;
        min-height: 100vh;
        min-width: 100vw;
        z-index:-99;
        filter:blur(5px);
        background: #000 url(https://sc2.nosdn.127.net/1/style/v4/common/main_bg_v4.jpg) no-repeat fixed center top;
        // img{
        //     height:100%;
        // }
    }
}
.nav{
    height:40px;
    background:#000819;
    border-bottom:solid 1px rgba(255,255,255,.15);
    padding:0px 40px;
    box-sizing: border-box  ;
    ul{
        max-width: 1200px;
        display:flex;
        list-style: none;
        margin:0 auto;
        li{
            font-size: 15px;
            color:rgba(255,255,255,.7);
            line-height: 40px;
            margin-right:20px;
            cursor: pointer;
            a{
                width:100%;
                height:100%;
                color:rgba(255,255,255,.7);
                text-decoration: none;
                padding:0px 10px;
                line-height: 40px;
                display:block;
            }
            &.active{
                a{
                    text-shadow: 0 0 15px #fff, 0 0 30px rgb(255 255 255 / 30%);
                    color:#fff;
                }
            }
            &:hover{
                text-decoration: underline;
            }
        }
    }
}
#pageCenter{
    max-width: 1450px;
    min-height: 100vh;
    // background:rgba(0,0,0,0.7);
    margin:0 auto;
    padding-top:40px;
}

.title{
    text-align: center;
    max-width:1200px;
    margin:0 auto;
    // height:60px;
    margin-bottom:20px;
    user-select: none;
    display:flex;
    flex-direction: column;
    align-items: center;
    // background: url(https://sc2.nosdn.127.net/1/style/v4/common/nav-1.png) no-repeat;
    // background-position: -176px -81px;
    .main{
        font-size:36px;
        font-weight: bold;
        color:#a3c9e4;
        transition: all 0.35s;
        &:hover{
            color:#fff;
            text-shadow: 0 0 15px #fff, 0 0 30px rgb(255 255 255 / 30%);        
        }
    }
    .time{
        color:#4393bf;
        font-size:12px;
    }
    .rantInfo{
        max-width: 800px;
        border-radius: 6px;
        // height:100px;
        border:1px solid #29b0df;
        background:#001b44bb;
        color:#4d83b5;
        box-shadow: 0 0 9px #0068a3;
        margin-top:15px;
        padding:10px;
        transition: all 0.35s;
        .white{
            color:#ffffffaa;
            transition: all 0.35s;
        }
        &:hover{
            background:#001b44dd;
            .white{
                color:#fff;
            }
        }
    }

}

#List{
    border-radius: 8px;
    max-width: 1000px;
    padding-bottom:300px;
    margin:0 auto;
    // background:#010d1f99;
    overflow: hidden;
    position: relative;
    .List_image{
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background:#010d1f;
        opacity: 0.5;
        .list_topImage{
            background: url(https://sc2.nosdn.127.net/1/style/v3/common/common.png);
            width:100%;
            height:160px;
            position: absolute;
            left:0;
            top:0;
        }
        .list_bottomImage{
            background: url(https://sc2.nosdn.127.net/1/style/v3/common/common.png);
            width:100%;
            transform: rotateZ(180deg);
            height:160px;
            position: absolute;
            left:0;
            bottom:1px;
        }
    }

    ul{
        padding:10px 10px;
        position: relative;
        z-index:99;
        list-style: none;
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            a{
                display:block;
                width:100%;
                flex-grow: 1;
                margin-left:-2px;
            }
            width:25%;
            flex-grow: 1;
            margin:10px;
            border-radius: 8px;
            // background:#010d1f99;
            margin-bottom:10px;
            // padding:10px;
            // border:2px solid #4393bf99;
            background:#010d1f99;
            position: relative;
            // overflow: hidden;
            display:flex;
            transition:all 0.35s;
            box-shadow: 2px 2px 8px rgb(0 0 0 / 30%);
            // &:last-child{
            //     max-width: 650px;
            // }
            cursor: pointer;
            // overflow: hidden;
            &:hover{
                img{
                    border:4px solid #4393bf;
                }
                .userName{
                    text-shadow: 0 0 8px rgb(163 201 228 / 100%), 0 0 15px rgb(163 201 228 / 90%) !important;
                    background:#00081999 !important;
                }
                img{
                    // width:120%;
                }
            }
            img{
                // position: absolute;
                // left:0;
                // top:0;
                transition: all 0.35s;
                border-radius:6px;
                width:100%;
                // height:150px;
                border:4px solid #4393bf33;
                transition: all 0.35s;
            }
            .info{
                display:flex;
                flex-direction: column;
                padding-left:6px;
                position: absolute;
                left:-6px;
                bottom:13px;
                // justify-content: space-between   ;
                width:100%;
                .userName{
                    color:#fff;
                    font-weight: bold;
                    font-size: 18px;
                    width:100%;
                    transition: all 0.35s;
                    background:#00081966;
                    padding:5px;
                    text-shadow: 0 0 8px rgb(163 201 228 / 60%), 0 0 15px rgb(163 201 228 / 10%);
                }
                .qq{
                    color:#fff;
                    font-size: 12px;
                    opacity: 0.5;
                    font-weight: normal;
                }
                .money{
                    color:red;
                    font-size: 20px;
                    // flex-grow: 1;
                    font-weight: bold;
                    margin-top:16px;
                }
            }
            .index{
                font-size:46px;
                color:#fff;
                font-weight: bold;
                opacity: 0.25;
                flex-grow: 1;
                justify-content: flex-end;
                text-align: right;
                align-items: center;
                vertical-align: middle;
                margin-top:10px;
                margin-right:10px;
                user-select: none;
                transition:all 0.35s;
            }
            &:hover{
                border-color:#56abd8;
                .index{
                    opacity: 0.5;
                }
            }
            // &::after{
            //     content:"";
            //     background: url(https://sc2.nosdn.127.net/1/style/v3/common/common.png) no-repeat;
            //     width:100%;
            //     height:160px;
            //     position: absolute;
            //     left:0;
            //     top:0;
            //     opacity: 0.95;
            //     z-index: -99;
            // }
        }
    }
}